//加载公共样式
require('../../assets/css/index.less')

//加载自己的样式
require('./home.less')
/* 引入swiper的css样式 */
require('swiper/dist/css/swiper.min.css')
//获取axios工具函数
const request = require('../../utils/request')
// /* 引入字体图标 */
// require('../../assets/fonts/iconfont.css')
//引入swiper
const mySwiper= require('swiper')

//引入tabbar渲染函数
const renderTabbar = require('../../utils/tabbar')
 console.log(renderTabbar);

window.onload=()=>{


    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 2000,//可选选项，自动滑动
        loop:true,
        pagination:'swiper-pagination'
    })
}

window.onload = () => {
  //渲染tabbar
renderTabbar('home')
    //获取dom
    const rankNo = document.querySelector('#num1')
    // console.log(rankNo);
    const clock = document.querySelector('.dayplay')
   
    const clockDay = document.querySelector('.sumnum')
   
    const badge = document.querySelector('#num2')
    console.log(badge );
    //使用swiper
    let mySwiper = new Swiper('.swiper-container', {
      autoplay: 2000, //可选选项，自动滑动
      initialSlide: 0,
      // effect: 'fade',
      // direction: 'vertical',
      pagination: '.swiper-pagination', //分页器
      loop: true, //无限循环
    })
  
    //获取打卡信息
    function getClockInfo() {
      request.get('/api/user/clockInInfo').then(res => {
        //解构数据
        let {errno, data} = res.data
        //判断
      if (errno === 0) {
          console.log('data.isClockIn :>> ', data.isClockIn)
          if (data.isClockIn) {
            clock.textContent = '已打卡'
            clock.className = 'clocked'
          } else {
            clock.textContent = '今日打卡'
            clock.className = 'dayplay'
          }
        }
      })
    }
  
    //初始化调用一次
    getClockInfo()
  
    //获取用户信息
    function getUserInfo() {
      request.get('/api/user/info').then(res => {
        //1 解构数据
        let {errno, data} = res.data
        //2 判断
        if (errno === 0) {
          //3 处理业务逻辑
          render(data)
        }
      })
    }
  
    //渲染函数 渲染dom更新dom
    function render(data) {
      rankNo.textContent = data.ranking
      clockDay.textContent = data.clockCount
      badge.textContent = data.badges
    }
  
    //初始化调用一次
    getUserInfo()

    //点击打卡
  clock.addEventListener('click', () => {
    request.post('/api/user/clockIn').then(res => {
      console.log('res.data :>> ', res.data)
      //解构数据
      let {errno, message} = res.data
      //判断
      if (errno === 0) {
        //打卡成功 重新请求数据 自动渲染
        getUserInfo()
        getClockInfo()
      } else {
        alert(message)
      }
    })
  })




  }
  